<template>
  <div class="p-[50px_20px] flex-1">
    <!-- top -->
    <div class="flex items-center p-b-40px b-b b-b-solid b-[#e5e9ef]">
      <img
        :src="userStore.userInfo.userVo.avatar || defultAvatar"
        alt=""
        class="w-64px h-64px b-rd-[50%]"
      />
      <div class="m-l-[16px] w-100%">
        <div class="flex items-center m-b-10px">
          <p class="text-18px fw-600 c-[#222]">
            {{ userStore.userInfo.userVo.nickName }}
          </p>
          <span
            class="text-12px b b-solid b-[#99a2aa] b-rd-4px p-2px c-[#99a2aa] m-l-5"
            >正式会员</span
          >
        </div>
        <div class="flex justify-between items-center">
          <div class="flex">
            <div class="h-24px w-280px bg-[#e5e9ef] flex items-center relative">
              <div
                class="h-24px bg-[#ff905a] text-left c-[#fff] leading-[24px] p-l-5px box-border fw-600"
                :class="`w-${userStore.userInfo.levelProgress}%`"
              >
                LV{{ userStore.userInfo.currentUserLevel }}
              </div>
              <div
                class="w-0 h-0 b-solid b-b-0 b-x-[8px] b-t-[10px] b-x-transparent b-t-#fff absolute top-0px left-40px"
              ></div>

              <div
                class="w-0 h-0 b-solid b-t-0 b-x-[8px] b-b-[10px] b-x-transparent b-b-#fff absolute bottom-0px left-40px"
              ></div>
            </div>
            <span class="text-12px leading-[24px] m-l-20px">
              {{ userStore.userInfo.experience }}
            </span>
            <span class="mx-5px leading-[24px]">/</span>
            <span class="c-[#99a2aa] text-12px leading-[24px]">
              {{ userStore.userInfo.requiredExperience }}
            </span>
          </div>
          <div class="flex items-center gap-x-20px">
            <div
              class="w-70px h-24px text-12px b b-solid leading-[22px] text-center b-rd-4px b-#e5e9ef c-#6d757a cursor-pointer hover:b-#00a1d6 hover:c-#00a1d6"
              @click="updateUserInfoBut"
            >
              修改资料
            </div>
            <div
              class="w-70px h-24px text-12px b b-solid leading-[22px] text-center b-rd-4px b-#e5e9ef c-#6d757a cursor-pointer hover:b-#00a1d6 hover:c-#00a1d6"
            >
              <span>个人空间</span>
              <span class="iconfont icon-jiantou2 v-end"></span>
            </div>
          </div>
        </div>
        <div class="flex items-center m-t-10px gap-x-20px">
          <div>
            <span
              class="bg-#00a1d6 c-#fff b-rd-[50%] b box-border b-solid inline-block w-20px h-21px m-r-5px leading-[20px] text-center text-12px"
              >B</span
            >
            <span>0</span>
          </div>
          <div>
            <span
              class="iconfont icon-bi c-#00a1d6 text-20px inline-block w-20px h-20px m-r-5px"
            ></span>
            <span>{{ userStore.userInfo.balance }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 每日奖励 -->
    <div class="m-t-40px p-b-40px b-b b-b-solid b-[#e5e9ef]">
      <svg
        t="1744341687694"
        class="icon v-bottom"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="6307"
        width="30"
        height="30"
      >
        <path
          d="M453.29294222 353.62133333H568.76373333v548.49308445H453.29294222z"
          fill="#FF9E12"
          p-id="6308"
        ></path>
        <path
          d="M321.50186667 301.94574222c-49.22140445 1.23562667-90.11086222-37.67068445-91.33738667-86.88867555-1.23107555-49.21799111 37.67068445-90.11541333 86.88867555-91.34193778a89.06979555 89.06979555 0 0 1 41.02257778 8.85304889 90.03690667 90.03690667 0 0 1 29.49347556 21.48920889l125.24885333 147.89290666H321.50186667v-0.00455111z m0 0"
          fill="#FF9E12"
          p-id="6309"
        ></path>
        <path
          d="M765.07591111 275.19886222a88.65564445 88.65564445 0 0 1-63.53806222 26.74688H511.35146667l124.81763555-149.03523555a91.46481778 91.46481778 0 0 1 29.71534223-21.49376c44.80455111-20.38215111 97.66229333-0.56888889 118.04444444 44.25386666 15.43509333 33.96039111 8.10211555 73.94190222-18.38648889 100.20864l-0.46648889-0.68039111z m0 0"
          fill="#FF9E12"
          p-id="6310"
        ></path>
        <path
          d="M892.47061333 545.64864v328.96a27.43182222 27.43182222 0 0 1-27.43523555 27.42158222H618.02268445V545.64408889h274.44906666v0.00455111zM402.09294222 902.21226667h-246.14684444c-15.14609778-0.00341333-27.42613333-12.28003555-27.43068445-27.42613334V545.65319111H402.79608889v356.38158222l-0.70314667 0.17749334zM128.68835555 353.53713778H402.97813333v137.14659555H128.68835555a27.45002667 27.45002667 0 0 1-19.39456-8.03498666A27.44888889 27.44888889 0 0 1 101.26222222 463.24849778v-82.10659556c0.09784889-15.11082667 12.31985778-27.33397333 27.42613333-27.43182222v-0.17294222z m490.38222223 0h274.27612444c15.11082667 0.09329778 27.34193778 12.31530667 27.44433778 27.42727111v82.28408889c-0.00455111 15.1552-12.28913778 27.43523555-27.44433778 27.43523555H618.01813333l1.05244445-137.14659555z m0 0"
          fill="#1D92FF"
          p-id="6311"
        ></path>
      </svg>
      <span class="text-20px m-l-10px">每日奖励</span>
      <div class="flex justify-around items-center m-t-20px">
        <div
          class="w-186px flex flex-col gap-y-10px items-center justify-center b-r b-[#e1e2e5] b-r-solid box-border"
        >
          <div
            class="w-20 h-20 rounded-full bg-[linear-gradient(135deg,_#23bff2_50%,_#00a1d6_50%)] flex items-center justify-center"
          >
            <div>
              <span class="c-#fff text-24px">5</span>
              <span class="c-#fff text-12px">EXP</span>
            </div>
          </div>
          <p>每日登录</p>
          <p
            v-if="isTodayLoginflag"
            class="text-12px c-#fff bg-#8a95a8 b-rd-4px leading-20px p-x-10px text-center"
          >
            5经验值到手
          </p>
          <p v-else class="text-12px c-#99a2aa">未完成</p>
        </div>
        <div
          class="w-186px flex flex-col gap-y-10px items-center justify-center b-r b-[#e1e2e5] b-r-solid box-border"
        >
          <div
            class="w-20 h-20 rounded-full bg-[linear-gradient(135deg,_#23bff2_50%,_#00a1d6_50%)] flex items-center justify-center"
          >
            <div>
              <span class="c-#fff text-24px">5</span>
              <span class="c-#fff text-12px">EXP</span>
            </div>
          </div>
          <p>每日观看视频</p>
          <p
            class="text-12px c-#fff bg-#8a95a8 b-rd-4px leading-20px p-x-10px text-center"
          >
            5经验值到手
          </p>
          <p class="text-12px c-#99a2aa">未完成</p>
        </div>
        <div
          class="w-186px flex flex-col gap-y-10px items-center justify-center b-r b-[#e1e2e5] b-r-solid box-border"
        >
          <div
            class="w-20 h-20 rounded-full bg-[linear-gradient(135deg,_#23bff2_50%,_#00a1d6_50%)] flex items-center justify-center"
          >
            <div>
              <span class="c-#fff text-24px">50</span>
              <span class="c-#fff text-12px">EXP</span>
            </div>
          </div>
          <p>每日投币</p>
          <p
            class="text-12px c-#fff bg-#8a95a8 b-rd-4px leading-20px p-x-10px text-center"
          >
            5经验值到手
          </p>
          <p class="text-12px c-#99a2aa">已获得0/50</p>
        </div>
        <div
          class="w-186px flex flex-col gap-y-10px items-center justify-center"
        >
          <div
            class="w-20 h-20 rounded-full bg-[linear-gradient(135deg,_#23bff2_50%,_#00a1d6_50%)] flex items-center justify-center"
          >
            <div>
              <span class="c-#fff text-24px">5</span>
              <span class="c-#fff text-12px">EXP</span>
            </div>
          </div>
          <p>每日分享视频(客户端)</p>
          <p class="text-12px c-#99a2aa">未完成</p>
        </div>
      </div>
    </div>

    <!-- 成就勋章 -->
    <div class="m-t-40px p-b-40px b-b b-b-solid b-[#e5e9ef]">
      <svg
        t="1744342917807"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="6471"
        width="16"
        height="16"
      >
        <path
          d="M1023.915207 401.854721c0-96.312024-268.009805-102.391521-303.974827-144.436038S585.935477 0 511.957604 0s-172.017755 214.638225-207.982777 255.978802S0 305.03074 0 401.854721c0 75.289765 116.214376 182.384896 167.666115 246.379597a621.708515 621.708515 0 0 1 523.47665-289.672011c-255.978802 0-427.740578 246.379597-508.757869 397.247103-15.614707 84.249023-42.236502 214.894204-15.998675 239.980126 94.712157 89.912554 300.263134-64.282677 345.571383-64.282676s250.859226 153.587281 345.571382 64.282676c35.581053-33.789202-25.59788-262.378272-25.59788-305.286718s191.984101-192.336072 191.984101-288.648097z m0 0"
          fill="#F6544F"
          p-id="6472"
        ></path>
      </svg>
      <span class="text-20px m-l-10px">成就勋章</span>
      <div class="flex justify-center items-center m-t-20px gap-20px">
        <span class="iconfont icon-meiyoufenzu text-90px c-#e5e9ef"></span>
        <div>
          <span class="c-#99a2aa text-12px">你还没有领取过勋章哦</span>
          <div
            class="w-102px h-24px leading-24px bg-#22a1d6 b-rd-4px cursor-pointer text-12px text-center c-#fff m-t-10px"
            @click="catMedalDetailsBut"
          >
            查看勋章详情
          </div>
        </div>
      </div>
    </div>

    <!-- 账号安全 -->
    <div class="m-t-40px">
      <svg
        t="1744342956287"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="6628"
        width="16"
        height="16"
      >
        <path
          d="M475.568101 1017.855874a112.619869 112.619869 0 0 0 73.404869 0c161.600695-55.409203 220.081866-100.787103 220.081865-100.787103C937.197684 802.419886 938.657817 651.893447 938.657817 651.893447V176.364156c0-23.324203-18.962766-43.367847-42.268006-44.107394-119.332688-4.171809-295.30716-91.85564-359.6099-126.102396a52.981969 52.981969 0 0 0-49.568671 0c-64.473405 34.076091-240.106547 121.930587-359.609901 126.102396C104.277137 133.015272 85.333333 153.248544 85.333333 176.383119v475.3207s1.460133 150.545402 169.602982 265.175324c0.568883 0.189628 59.031092 45.3779 220.612824 100.976731z"
          fill="#84B1FF"
          p-id="6629"
        ></path>
        <path
          d="M481.939591 943.066724a91.969417 91.969417 0 0 0 60.282634 0c132.928992-46.458777 181.018567-84.346385 181.018567-84.346385C861.365582 762.465337 862.806752 636.381904 862.806752 636.381904V242.961392c0-19.588538-15.606357-36.237846-34.796676-36.977395-98.321943-3.470186-242.723409-77.216384-295.64849-105.944975a42.36282 42.36282 0 0 0-40.732022 0c-52.906118 28.728591-197.326546 102.114497-295.629526 105.944975C176.771792 206.723545 161.184399 223.581444 161.184399 242.961392v393.230885s1.251543 126.443726 139.56596 222.338435c0-0.189628 48.26024 38.058272 181.189232 84.536012z"
          fill="#5191FF"
          p-id="6630"
        ></path>
        <path
          d="M521.476959 94.824261c-7.376516 0-14.373777 1.839388-20.821118 5.309575-54.366251 28.728591-202.711972 102.133459-303.726628 105.982901-19.721277 0.720585-35.744814 17.559522-35.744814 36.977394v393.344661s1.289468 126.481651 143.377476 222.395324c0 0 49.398006 38.058272 185.948886 84.38431 10.14508 3.470186 20.460825 4.930319 30.966198 4.930319V94.824261z"
          fill="#3680FF"
          p-id="6631"
        ></path>
        <path
          d="M511.995575 303.414691c68.265959 0 123.257981 57.495107 123.257981 128.851997 0 39.537368-16.876862 74.78915-43.500586 98.397794 58.632873 19.94883 104.902023 70.901783 118.024258 136.531917 6.636968 31.724708-12.325798 63.449416-43.576437 71.375853-3.034043 0.796436-6.655931 0.948138-9.93649 0.986064H369.71794C338.448338 739.558316 312.886529 712.801852 312.886529 680.091081c0-3.982181 0-8.9125 0.948138-12.894682 13.50149-64.245852 58.594948-116.203832 118.441439-136.493991-27.685639-24.499894-43.614363-60.510187-43.538512-98.416758C388.737594 360.890835 443.729617 303.414691 511.995575 303.414691z m23.85516 257.703994H488.481745c-65.345693 0-123.125242 47.596543-137.328354 115.009177-1.896277 10.903591 3.792553 20.802155 14.203112 23.779309h127.42979v-69.536464c0-10.884628 8.533245-19.797128 18.962766-19.797128s18.943804 8.9125 18.943804 19.797128v69.536464H654.216323c10.429521 0 18.943804-7.926436 18.943803-19.81609v-4.968245c-14.222075-66.407608-71.01556-113.985188-137.328353-113.985189zM511.995575 343.046872c-47.406916 0-85.332448 39.670107-85.332448 89.219816 0 49.568671 37.925533 89.219815 85.332448 89.219815s85.332448-39.632182 85.332449-89.219815c0-49.549708-37.925533-89.200853-85.332449-89.200853z"
          fill="#FFFFFF"
          p-id="6632"
        ></path>
      </svg>
      <span class="text-20px m-l-10px">账号安全</span>
      <div
        class="w-102px h-22px b b-solid b-#ced3db b-rd-4px float-right text-center cursor-pointer"
        @click="catAccountSecurityBut"
      >
        <span class="c-#6d757a text-12px">更多账号安全</span>
        <span class="iconfont icon-jiantou2 v-mid"></span>
      </div>
      <div class="m-t-20px grid grid-cols-2 gap-y-40px">
        <div class="flex gap-x-20px">
          <span class="iconfont icon-youxiang c-#21b4e9 text-60px"></span>
          <div class="flex flex-col gap-y-10px">
            <p>我的邮箱</p>
            <p class="text-12px c-#99a2aa">绑定邮箱后即可使用邮箱登录</p>
            <div class="flex gap-x-20px items-center">
              <div
                class="w-70px h-24px leading-24px bg-#e5e9ef c-#abb4c1 b-rd-4px cursor-default text-align-center text-12px"
              >
                已绑定
              </div>
              <div class="c-blue text-12px cursor-pointer">
                更改邮箱
                <span
                  class="iconfont icon-jiantou2 text-14px v-text-bottom"
                ></span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex gap-x-20px">
          <span class="iconfont icon-shouji c-#21b4e9 text-60px"></span>
          <div class="flex flex-col gap-y-10px">
            <p>我的手机</p>
            <p class="text-12px c-#99a2aa">绑定手机后即可使用手机号登录</p>
            <div class="flex gap-x-20px items-center">
              <div
                class="w-70px h-24px leading-24px bg-#e5e9ef c-#abb4c1 b-rd-4px cursor-default text-align-center text-12px"
              >
                已绑定
              </div>
              <div class="c-blue text-12px cursor-pointer">
                更改手机
                <span
                  class="iconfont icon-jiantou2 text-14px v-text-bottom"
                ></span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex gap-x-20px">
          <span class="iconfont icon-youxiang c-#21b4e9 text-60px"></span>
          <div class="flex flex-col gap-y-10px">
            <p>我的密保</p>
            <p class="text-12px c-#99a2aa">设置密保，账号更安全</p>
            <div class="flex gap-x-20px items-center">
              <div
                class="w-70px h-24px leading-24px bg-#e5e9ef c-#abb4c1 b-rd-4px cursor-default text-align-center text-12px"
              >
                已设置
              </div>
              <div class="c-blue text-12px cursor-pointer">
                查看并设置
                <span
                  class="iconfont icon-jiantou2 text-14px v-text-bottom"
                ></span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex gap-x-20px">
          <span class="iconfont icon-youxiang c-#21b4e9 text-60px"></span>
          <div class="flex flex-col gap-y-10px">
            <p>实名认证</p>
            <p class="text-12px c-#99a2aa">
              实名认证成功后，可享受开通直播间等服务
            </p>
            <div
              class="w-70px h-24px leading-24px bg-#e5e9ef c-#abb4c1 b-rd-4px cursor-default text-align-center text-12px"
            >
              已认证
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store/userStore";
import defultAvatar from "@/assets/img/home/data-head.jpg";
import { onBeforeMount, ref } from "vue";
import { DateUtil } from "@/utils/dateUtil";

const emit = defineEmits();

const userStore = useUserStore();

const isTodayLoginflag =
  userStore.userInfo.todayLogin === DateUtil.format(new Date(), "YYYY-MM-DD");

// 查看勋章详情
const catMedalDetailsBut = () => {};

// 查看账号安全
const catAccountSecurityBut = () => {};

// 修改资料按钮
const updateUserInfoBut = () => {
  emit("update:activeIndex", 3);
};

onBeforeMount(async () => {});
</script>

<style scoped></style>
